<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>angularjs</title>
	<style>
		.content {
			display: flex;
		}

		.content>div {
			flex: 1;
		}

		p {
			width: 400px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	</style>
</head>

<body ng-app="testApp">
	<div class="content" ng-controller="testCtrl">
		<div>
			<p>parent &lt; value1: {{value1}}</p>
			<p>parent = value2: {{value2}}</p>
			<p>parent &lt; obj1: {{object1}}</p>
			<p>parent = obj2: {{object2}}</p>
			<p>parent &lt; obj3: {{object3}}</p>
			<p>parent = obj4: {{object4}}</p>
			<p>parent &lt; array1: {{array1}}</p>
			<p>parent = array2: {{array2}}</p>
			<p>parent &lt; array3: {{array3}}</p>
			<p>parent = array4: {{array4}}</p>
			<button ng-click="change()">parent change</button>
		</div>
		<div>
			<test-component value1="value1" value2="value2" object1="object1" object2="object2" object3="object3"
				object4="object4" array1="array1" array2="array2" array3="array3" array4="array4" action1="action1(id)">
			</test-component>
		</div>
		<test-directive value1="{{value1}}" value2="{{value2}}"></test-directive>
	</div>
	<script src="./js/angular.js"></script>
	<script>
		let app = angular.module('testApp', []).controller('testCtrl', ['$scope', function ($scope) {
			$scope.value1 = 'value11';
			$scope.value2 = 'value2';
			$scope.object1 = {
				name: 'obj1'
			};
			$scope.object2 = {
				name: 'obj2'
			};
			$scope.object3 = {
				name: 'obj3'
			};
			$scope.object4 = {
				name: 'obj4'
			};
			$scope.array1 = [1]
			$scope.array2 = [2]
			$scope.array3 = [3]
			$scope.array4 = [4]
			$scope.action1 = function (id) {
				console.log(id)
			}
			$scope.change = function () {
				$scope.value1 = Math.random() * 10000;
				$scope.value2 = Math.random() * 10000;
				$scope.object1.name = Math.random() * 10000;
				$scope.object2.name = Math.random() * 10000;
				$scope.object3 = {
					name: Math.random() * 10000
				};
				$scope.object4 = {
					name: Math.random() * 10000
				};
				$scope.array1.unshift(Math.random())
				$scope.array2.unshift(Math.random())
				$scope.array3 = [Math.random()]
				$scope.array4 = [Math.random()]
				$scope.action1 = function (id) {
					console.log('change: ', id)
				}
			}
		}]);
		app.directive('testDirective', function () {
			return {
				restrict: 'EA',

				template: `
				<div>
					<p>child @ value1: {{value1}}</p>
					<p>child = value2: {{value2}}</p>
				</div>
				`,
				scope: {
					value1: '@',
					value2: '@'
				},
				controller: function ($scope) {
					console.log($scope);
					$scope.$onInit = function () {
						console.log('directive init:', this);
					}
				},
				// compile: function ($element, attr) {
				// 	console.log('开始编译', $element, attr)
				// },
				link: function (scope) {
					console.log('link') // 当存在compile则，不执行link
					scope.$onChanges = function (changesObj) {
						console.log('directive change:', changesObj);
					}
				}
			}
		})
		app.component('testComponent', {
			template: `
						<div>
							<p>child < value1: {{$ctrl.value1}}</p>
							<p>child = value2: {{$ctrl.value2}}</p>
							<p>child < obj1: {{$ctrl.object1}}</p>
							<p>child = obj2: {{$ctrl.object2}}</p>
							<p>child = obj3: {{$ctrl.object3}}</p>
							<p>child = obj4: {{$ctrl.object4}}</p>
							<p>child < array1: {{$ctrl.array1}}</p>
							<p>child = array2: {{$ctrl.array2}}</p>
							<p>child < array3: {{$ctrl.array3}}</p>
							<p>child = array4: {{$ctrl.array4}}</p>
              <button ng-click="$ctrl.childChange()">child change</button>
            </div>
            `,
			bindings: {
				value1: '<',
				value2: '=',
				object1: '<',
				object2: '=',
				object3: '<',
				object4: '=',
				array1: '<',
				array2: '=',
				array3: '<',
				array4: '=',
				action1: '&'
			},
			controller: ['$scope', function ($scope) {
				this.childChange = function () {
					this.value1 = Math.random() * 10000;
					this.value2 = Math.random() * 10000;
					this.value3 = Math.random() * 10000;
					this.value4 = Math.random() * 10000;
					this.object1.name = Math.random() * 10000;
					this.object2.name = Math.random() * 10000;
					this.object3 = {
						name: Math.random() * 10000
					};
					this.object4 = {
						name: Math.random() * 10000
					};
					this.array1.unshift(Math.random())
					this.array2.unshift(Math.random())
					this.array3 = [Math.random()]
					this.array4 = [Math.random()]
					this.action1({
						id: '0'
					})
				}
				this.$onInit = function () {
					console.log('component init:', this);
				}
				// 针对 通过 < 方式引入的变量才会触发$onChanges事件，
				// 通过 = 方式引入的变量不会触发，
				// 通过<方式引入的对象、数组需要改变对象或者数组指向才会触发$onChanges事件
				this.$onChanges = function (changesObj) {
					console.log('component change:', changesObj);
				}
			}]
		})
	</script>
</body>

</html>